<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleleaf.org">
<head th:insert="base">
    <meta charset="UTF-8">
    <title></title>
</head>
<script type="text/javascript" src="/js/echarts.js"></script>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div id="switch_pie" style="width: 400px;height:300px; border: solid 1px black;"></div>
    </div>
</div>
<script th:inline="javascript">
    layui.use(['jquery'], function(){
        var $ = layui.jquery;
        var unUsedSwitch = [[${unUsedSwitch}]];
        var maintenanceSwitch = [[${maintenanceSwitch}]];
        var usedSwitch = [[${usedSwitch}]];

        var myChart = echarts.init(document.getElementById('switch_pie'));

        myChart.setOption({
            title: {
                text: '道岔使用情况饼状图'
            },

            series : [
                {
                    name: '访问来源',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {value:unUsedSwitch, name:'未使用道岔-'+unUsedSwitch},
                        {value:maintenanceSwitch, name:'维修中道岔-'+maintenanceSwitch},
                        {value:usedSwitch, name:'正常使用中道岔-'+usedSwitch}
                    ]
                }
            ]
        })
    });
</script>
</body>
</html>